import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import BaseTable from './baseTable'
import { Space, Popconfirm, Radio, Input, Modal, Button, Popover, Descriptions, List } from 'antd'
import { FileDoneOutlined } from '@ant-design/icons'
import constant from '../../constant/constant'

class FinishedTechnologyTable extends BaseTable {
    constructor(props) {
        super(props),
            this.state = {
                column: [
                    { title: "技术编号", dataIndex: "id", key: "id", ...this.getColumnSearchProps('id') },
                    {
                        title: "技术名称", dataIndex: "technologyName", key: "technologyName", ...this.getColumnSearchProps('technologyName'),
                        render: (text, record, index) => {
                            return (
                                <a onClick={() => { this.searchDetailedInformation(record.id) }}>{record.technologyName}</a>
                            )
                        }
                    },
                    { title: "供应商", dataIndex: "companyName", key: "companyName", ...this.getColumnSearchProps('verificationUser') },
                    {
                        title: "作用材料", dataIndex: "functionalMaterials", key: "functionalMaterials",
                        filters: [
                            { text: "生活垃圾", value: "生活垃圾" },
                            { text: "农业废物", value: "农业废物" },
                            { text: "工业固体废物", value: "工业固体废物" },
                            { text: "危险废弃物", value: "危险废弃物" },
                            { text: "其他", value: "其他" }
                        ],
                        onFilter: (value, record) => record.functionalMaterials.indexOf(value) === 0
                    },
                    {
                        title: "技术种类", dataIndex: "technologyCategory", key: "technologyCategory",
                        filters: [
                            { text: "固废分离技术", value: "固废分离技术" },
                            { text: "循环再利用技术", value: "循环再利用技术" },
                            { text: "减少污染", value: "减少污染" },
                            { text: "分类回收", value: "分类回收" },
                            { text: "其他", value: "其他" }
                        ],
                        onFilter: (value, record) => record.technologyCategory.indexOf(value) === 0
                    },
                    { title: "验证有效期", dataIndex: "remainingValidDate", key: "remainingValidDate" }
                ],
                detailedInformationVisible: false
            }
    }

    searchDetailedInformation = id => {
        this.props.dispatch({
            type: "search/searchDetailedInformationByTechnologyId",
            data: { verificationApplicationId: id }
        })

        this.setState({
            detailedInformationVisible: true
        })
    }

    cancleModal = () => {
        this.setState({
            detailedInformationVisible: false
        })
    }

    componentDidMount() {
        this.props.dispatch({
            type: "search/getFinishedTechnologyTableData"
        })
    }

    render() {
        return (
            <Fragment>
                <Modal
                    visible={this.state.detailedInformationVisible}
                    onOk={this.cancleModal}
                    onCancel={this.cancleModal}
                    footer={null}
                    width={800}
                >
                    <Descriptions title={this.props.technologyDetailedInformation.technologyName} bordered={true} column={2}>
                        <Descriptions label="技术说明" span={2}>目的：{this.props.technologyDetailedInformation.technologyTarget} <br /> 原理：{this.props.technologyDetailedInformation.technologyPrinciple}</Descriptions>
                        <Descriptions label="技术编号">{this.props.technologyDetailedInformation.id}</Descriptions>
                        <Descriptions label="技术作用材料">{this.props.technologyDetailedInformation.functionalMaterials}</Descriptions>
                        <Descriptions label="技术种类">{this.props.technologyDetailedInformation.technologyCategory}</Descriptions>
                        <Descriptions label="技术操作条件">{this.props.technologyDetailedInformation.operatingConditions}</Descriptions>
                        <Descriptions label="验证机构">{this.props.technologyDetailedInformation.mechanismName}</Descriptions>
                        <Descriptions label="验证有效期">{this.props.technologyDetailedInformation.remainingValidDate}</Descriptions>
                        <Descriptions label="验证声明"><a href={constant.serverUrl + constant.fileUrl.mechanismUrl + this.props.technologyDetailedInformation.verificationStatement}>{this.props.technologyDetailedInformation.verificationStatement}</a></Descriptions>
                        <Descriptions label="验证报告"><a href={constant.serverUrl + constant.fileUrl.mechanismUrl + this.props.technologyDetailedInformation.verificationReport}>{this.props.technologyDetailedInformation.verificationReport}</a></Descriptions>
                        <Descriptions label="技术估值">{this.props.technologyDetailedInformation.technicalValuation ? (this.props.technologyDetailedInformation.valuationType == 1 ? "定性估值："+this.props.technologyDetailedInformation.technicalValuation : "定量估值："+this.props.technologyDetailedInformation.technicalValuation) : "技术供给方暂未评估" }</Descriptions>
                    </Descriptions>

                    <Descriptions style={{marginTop:20}} title={this.props.technologyDetailedInformation.companyName} bordered={true} column={3}>
                        <Descriptions label="电话">{this.props.technologyDetailedInformation.phone}</Descriptions>
                        <Descriptions label="邮箱">{this.props.technologyDetailedInformation.email}</Descriptions>
                        <Descriptions label="地址">{this.props.technologyDetailedInformation.companyAddress}</Descriptions>
                        <Descriptions label="其他验证技术" col={3}>
                            <List
                                dataSource={this.props.otherTechnology}
                                renderItem={item => {
                                    return (
                                        <List.Item>
                                            <List.Item.Meta
                                                avatar={<FileDoneOutlined></FileDoneOutlined>}
                                                title={"技术编号：" + item.id + "  技术名称：" + item.technologyName}
                                            />
                                        </List.Item>
                                    )
                                }}
                            >
                            </List>
                        </Descriptions>
                    </Descriptions>
                </Modal>
                {super.render(this.state.column, this.props.dataSource, {pageSize:12})}
            </Fragment>
        )
    }
}

const mapStateToProps = state => {
    let dataSource = state.search.finishedTechnologyList
    let technologyDetailedInformation = state.search.technologyDetailedInformation
    let otherTechnology = state.search.otherTechnology
    return {
        dataSource,
        technologyDetailedInformation,
        otherTechnology
    }
}

export default connect(mapStateToProps)(FinishedTechnologyTable)